<template>
  <div>
    <el-form label-width='120px' @submit.native.prevent='save'>
      <el-form-item label='ID'>
        <el-input v-model='model.id'></el-input>
      </el-form-item>
      <el-form-item label='用户名'>
        <el-input v-model='model.name'></el-input>
      </el-form-item>
      <el-form-item label='密码'>
        <el-input type='password' v-model='model.password'></el-input>
      </el-form-item>
      <el-form-item label='Email'>
        <el-input v-model='model.email'></el-input>
      </el-form-item>
      <el-form-item label='QQ'>
        <el-input v-model='model.qqNumber'></el-input>
      </el-form-item>
      <el-form-item label='电话号码'>
        <el-input v-model='model.telephone'></el-input>
      </el-form-item>
      <el-form-item label='头像'>
        <el-avatar :size="200"  :src= "model.avatar"></el-avatar>
      </el-form-item>
      <el-form-item label="添加新头像">
        <!--elementui的上传图片的upload组件-->
      <el-upload class="upload-demo"
                 ref="upload"
                 list-type="picture-card"
                 action="/api/admin"
                 :limit="9"
                 :before-upload="beforeupload"
                 :on-exceed="exceedHandle"
                 :auto-upload="false"
                 :multiple='true'>
        <i class="el-icon-plus"></i>
      </el-upload>
      </el-form-item>
      <el-input  v-model="model._method" type="hidden"></el-input>
      <el-form-item>
        <el-button type='primary' native-type='submit'>保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios'
axios.defaults.withCredentials = true // 引入axios
export default {
  props: {
    id: {}
  },
  data() {
    return {
      model: {
        id:"",
        password:"",
        name:"",
        telephone:"",
        qqNumber:"",
        email:""
      },
      param: '',
      hasImg: false
    }
  },
  created() {
    this.id && this.fetch()
  },
  methods: {
    beforeupload(file) {
      this.hasImg = true
      this.param = new FormData()
      this.param.append('upload', file)
      return false
    },
    async save() {
      // let res
      // if (this.id) {
      //   this.model._method = "put"
      //   res = await this.$http.post('admin', this.model)
      // } else {
      //   res = await this.$http.post('admin', this.model)
      // }
      // console.log(res)
      if(this.hasImg === false){
        this.param = new FormData()
      }
      let _this = this
      _this.$refs.upload.submit()
      if (this.id) {
        this.param.append('_method',"put")
      }
      this.param.append('id', _this.model.id)
      this.param.append('password', _this.model.password)
      this.param.append('name', _this.model.name)
      this.param.append('telephone', _this.model.telephone)
      this.param.append('qqNumber', _this.model.qqNumber)
      this.param.append('email', _this.model.email)    
      // 4.3，然后通过下面的方式把内容通过axios来传到后台
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          "Authorization": localStorage.token || ''
        }
      }
      console.log(this.param)
      const res = await axios.post('/api/admin', this.param, config)
      if(res.data.code === 3001){
        this.$message({
        type: "warning",
        message: "保存失败"
      });
      return
      }
      this.$router.push('/admin_users/list')
      this.$message({
        type: 'success',
        message: '保存成功'
      })
    },
    async fetch() {
      const res = await this.$http.get(`admin/${this.id}`)
      this.model = res.data.info
      this.model.avatar = "http://121.199.23.187:8080/static/images/avatar/"+this.model.avatar
    },
    handleChange(file, fileList) {
      this.model.imageUrl = URL.createObjectURL(file.raw);
    },
    // 5设置超过9张图给与提示
    exceedHandle () {
      alert('您现在选择已超过9张图，请重新选择')
    }
  }
}
</script>
